<template>
    <div class="contentWeb clear">
        <div class="member_menu">
            <Personleft active="" :mduserInfo="md_userInfo"/>
        </div>
        <div class="member_right ">
            <div class="personTengt">
                <Memtitle name="基本信息"/>
                <el-form ref="form" :model="form" :rules="rules" label-width="180px">
                    <div class="clear">
                        <div class="formban">
                            <el-form-item required label="上传照片" style="margin-bottom:31px">
                                <div class="uploadimg" v-loading="loading">
                                    <el-upload
                                            name="header_image"
                                            class="avatar-uploader"
                                            :action="uploadHeadImage"
                                            accept=".jpg,.png,"
                                            :show-file-list="false"
                                            :on-success="handleAvatarSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="form.header" :src="form.header" class="avatar"
                                             :style="uplaodstyle">
                                        <i v-else class="el-icon-plus avatar-uploader-icon" :style="uplaodstyle"></i>
                                    </el-upload>
                                    <span>支持格式：jpg、png</span>
                                </div>
                            </el-form-item>
                            <el-form-item required label="出生日期">
                                <el-date-picker type="date" value-format="yyyy-MM-dd" default-value="1985-01-01"
                                                placeholder="选择日期"
                                                :disabled="!!form.birthday && !editAble"
                                                v-model="form.birthday"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>

                            <!-- <el-form-item label="邮箱">
                                <el-input clearable placeholder="请输入" v-model="form.email"/>
                            </el-form-item> -->
                            <el-form-item label="户籍" prop="householdRegister">
                                <el-input clearable placeholder="请输入" v-model="form.householdRegister"/>
                            </el-form-item>
                        </div>
                        <div class="formban">
                            <el-form-item required label="姓名">
                                <el-input clearable placeholder="请输入" v-model="form.name" :disabled="!editAble"/>
                            </el-form-item>
                            <el-form-item required label="身份证号">
                                <el-input clearable placeholder="请输入" v-model="form.idCode" :disabled="!editAble"/>
                            </el-form-item>
                            <el-form-item required label="手机号">
                                <el-input clearable placeholder="请输入" v-model="form.mobileNo"/>
                            </el-form-item>
                            <el-form-item required label="性别" v-model="form.sex">
                                <ul class="sex-box">
                                    <li :class="['sex-item', {'active': form.sex == item}]" v-for="item in Object.keys(sexlist)" :key="item" @click="onclickChangeSex(item)">
                                        <span>{{sexlist[item]}}</span>
                                    </li>
                                </ul>
                            </el-form-item>
                            <el-form-item required label="学历">
                                <el-select v-model="form.education" :loading="xueliLoading"  placeholder="请选择学历">
                                    <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName"
                                               v-for="(item, index) in xuelilist"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item required label="开始工作年份">
                                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                                                default-value="2010-01-01"
                                                v-model="form.workYear"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <!-- <el-form-item label="居住地" prop="liveAddress">
                                <el-input clearable placeholder="请输入" v-model="form.liveAddress"/>
                            </el-form-item> -->
                        </div>
                    </div>
                    <el-form-item label="家庭地址" prop="homeAddress">
                        <el-input clearable placeholder="请输入" v-model="form.homeAddress"/>
                    </el-form-item>
                    <div class="clear">
                        <div class="formban">
                            <el-form-item required label="求职状态">
                                <el-select v-model="form.findJobStatus" placeholder="请选择求职状态">
                                    <el-option v-for="(item, i) in Object.keys(findJobStatusList)" :key="i"
                                               :label="findJobStatusList[item]"
                                               :value="item * 1"></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="微信号" prop="wechat">
                                <el-input clearable placeholder="请输入" v-model="form.wechat"/>
                            </el-form-item> -->

                            <!-- <el-form-item label="个人主页" prop="personalWeb">
                                <el-input clearable placeholder="请输入" v-model="form.personalWeb"/>
                            </el-form-item> -->
                            <el-form-item  label="目前年收入">
                                <el-input clearable placeholder="请输入" v-model="form.currentYearWage">
                                    <template slot="append">万元</template>
                                </el-input>
                            </el-form-item>
                            <!-- <el-form-item  label="基本工资">
                                <el-input clearable placeholder="请输入" v-model="form.baseWage">
                                    <template slot="append">万元</template>
                                </el-input>
                            </el-form-item> -->
                            <!-- <el-form-item  label="股权收益">
                                <el-input clearable placeholder="请输入" v-model="form.equityIncome">
                                    <template slot="append">万元</template>
                                </el-input>
                            </el-form-item> -->
                        </div>
                        <div class="formban">
                            <el-form-item required label="婚姻状态">
                                <el-select v-model="form.marryStatus"  placeholder="请选择婚姻状态">
                                    <el-option v-for="(item, i) in Object.keys(marryList)" :key="i"
                                               :label="marryList[item]"
                                               :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item required label="政治面貌">
                                <el-select v-model="form.politicCountenance"  placeholder="请选择政治面貌">
                                    <el-option :label="'群众'" :value="'群众'"></el-option>
                                    <el-option :label="'党员'" :value="'党员'"></el-option>
                                    <el-option :label="'团员'" :value="'团员'"></el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="身高">
                                <el-input clearable v-model="form.height" placeholder="请输入">
                                    <template slot="append">cm</template>
                                </el-input>
                            </el-form-item>
                            <!-- <el-form-item label="邮编">
                                <el-input clearable v-model="form.postcode" placeholder="请输入"></el-input>
                            </el-form-item> -->
                            <!-- <el-form-item   label="补贴/津贴">
                                <el-input clearable v-model="form.allowance" placeholder="请输入">
                                    <template slot="append">万元</template>
                                </el-input>
                            </el-form-item> -->
                            <!-- <el-form-item   label="奖金/佣金">
                                <el-input clearable v-model="form.bonus" placeholder="请输入">
                                    <template slot="append">万元</template>
                                </el-input>
                            </el-form-item> -->

                        </div>
                    </div>
                    <!-- <el-form-item label="自我评价" prop="introduction">
                        <el-input clearable type="textarea" v-model="form.introduction" rows="5" style="width: 100%"
                                  placeholder="请输入"/>
                    </el-form-item> -->
                    <el-form-item style="margin-top: 40px">
                      <el-button style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
                                type="primary"
                                @click="onSubmit">保存
                      </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<style scoped>
.el-select{width:295px;}
</style>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
// import Upload from '../../components/upload'
import Personleft from '../../components/personleft'
import {
  addbaseInfo,
  CVBaseInfo,
  updatebaseInfo,
  EducationState,
  marryStatus,
  uploadHeadImage,
  findJobStatus,
  searchUserInfoById,
  sexlist
} from '../../assets/js/domains'

// import util from '@/assets/js/util'

export default {
  name: 'PersonInfo',
  components: {
    Personleft,
    // Upload,
    Memtitle
  },
  directives: {},
  data: function () {
    return {
      editAble: true,
      sexIndex: 0,
      loading: false,
      marryLoading: true,
      xueliLoading: true,
      xuelilist: [],
      uploadHeadImage: uploadHeadImage,
      md_userInfo: {},
      sexlist: sexlist,
      marryList: marryStatus,
      findJobStatusList: findJobStatus,
      formMarryStatus: '',
      form: {
        age: '',
        approval: '',
        allowance: '',
        baseWage: '',
        birthday: '',
        bonus: '',
        createTime: '',
        currentYearWage: '',
        education: '',
        email: '',
        equityIncome: '',
        experience: '',
        findJobStatus: '',
        header: '',
        height: '',
        homeAddress: '',
        householdRegister: '',
        idCode: '',
        introduction: '',
        liveAddress: '',
        marryStatus: '',
        positionTitle: '',
        specialty: '',
        mobileNo: '',
        name: '',
        personalWeb: '',
        politicCountenance: '',
        postcode: '',
        sex: '1',
        updateTime: '',
        userUid: '',
        wechat: '',
        workYear: ''
      },
      uplaodstyle: {
        width: '160px',
        height: '160px'
      },
      rules: {
        householdRegister: [
          { required: true, message: '请输入户籍', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        // liveAddress: [
        //   { required: true, message: '请输入居住地', trigger: 'blur' },
        //   { validator: this.validSensWords, trigger: 'blur' }
        // ],
        homeAddress: [
          { required: true, message: '请输入家庭地址', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        // introduction: [
        //   { required: true, message: '请输入自我评价', trigger: 'blur' },
        //   { validator: this.validSensWords, trigger: 'blur' }
        // ],
        wechat: [{ validator: this.validSensWords, trigger: 'blur' }],
        personalWeb: [{ validator: this.validSensWords, trigger: 'blur' }]
      }
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
  },
  computed: {},
  mounted: function () {
    if (localStorage.getItem('md_userInfo')) {
      this.md_userInfo = JSON.parse(localStorage.getItem('md_userInfo'))
      this.form.name = this.md_userInfo.realName
      this.searchUserInfoById()
    }
    this.getEducationState()
    this.form.userUid = localStorage.getItem('md_user_uid')
    this.getCVBaseInfo()
  },
  methods: {
    searchUserInfoById () {
      if (this.md_userInfo.header) return
      const account = this.md_userInfo.account
      searchUserInfoById({ account }).then(res => {
        if (res.code === 200) {
          // this.form.name = res.data.name;
          this.form.idCode = res.data.identifyCode
          this.form.mobileNo = res.data.mobileNum
        }
      })
    },
    onclickChangeSex (item, index) {
      this.sexIndex = index
      this.form.sex = item
    },
    getEducationState: function () {
      const _this = this
      EducationState().then(function (res) {
        _this.xueliLoading = false
        if (res.code === 200) {
          _this.xuelilist = res.data
        }
      })
    },
    handleAvatarSuccess: function (e) {
      this.loading = false
      if (e.code === 200) {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.form.header = e.data
        this.form = Object.assign({}, this.form)
      }
    },
    beforeAvatarUpload: function (file) {
      const suffix = file.name.substr(file.name.lastIndexOf('.') + 1)
      if (!['jpg', 'png'].includes(suffix.toLowerCase())) {
        this.$message.error('头像只支持 jpg或png 格式！')
        return false
      }
      this.loading = true
    },
    dateDiff: function (date1, type) {
      date1 = new Date(date1).getTime()
      var date2 = new Date().getTime()
      type = type || 'hour'
      var diffValue = Math.abs(date2 - date1)
      var second = 1000
      var minute = second * 60
      var hour = minute * 60
      var day = hour * 24
      var month = day * 30
      var year = month * 12
      var timeType = {
        second: second,
        minute: minute,
        hour: hour,
        day: day,
        month: month,
        year: year
      }

      return Math.ceil(diffValue / timeType[type])
    },
    onSubmit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          this.$alert('请完善信息后，重新提交', '提示')
          return
        }
        this.submitForm()
      })
    },
    submitForm () {
      if (!this.submitCheck()) {
        return
      }
      const _this = this
      this.form.experience = this.dateDiff(this.form.workYear, 'year')
      this.form.age = Number(this.dateDiff(this.form.birthday, 'year'))
      this.form.allowance = Number(this.form.allowance)
      this.form.sex = Number(this.form.sex)
      this.form.baseWage = Number(this.form.baseWage)
      this.form.bonus = Number(this.form.bonus)
      this.form.currentYearWage = Number(this.form.currentYearWage)
      this.form.findJobStatus = Number(this.form.findJobStatus)
      this.form.height = Number(this.form.height)
      this.form.marryStatus = _this.form.marryStatus
      this.form.mobileNo = Number(this.form.mobileNo)
      this.form.postcode = Number(this.form.postcode)
      if (this.form.approval) {
        this.form.approval = '1'
        updatebaseInfo(this.form).then(function (res) {
          if (res.code === 200) {
            _this.form.marryStatus += ''
            _this.md_userInfo.headerUrl = _this.form.header
            localStorage.setItem('md_userInfo', JSON.stringify(_this.md_userInfo))
            _this.md_userInfo = Object.assign({}, _this.md_userInfo)

            _this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                document.documentElement.scrollTop = document.body.scrollTop = 0
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
          }
        })
      } else {
        this.form.approval = '1'
        addbaseInfo(_this.form).then(function (res) {
          if (res.code === 200) {
            _this.$alert('添加成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                window.location.href = 'personInfo.html#/yixiang'
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
          }
        })
      }
    },
    getCVBaseInfo () {
      const _this = this
      CVBaseInfo({ user_uid: this.form.userUid }).then(function (res) {
        if (res.code === 200) {
          if (res.data) {
            _this.editAble = false
            _this.form = res.data
            _this.md_userInfo.header = _this.form.header
            _this.md_userInfo.updateTime = _this.form.updateTime
            _this.form.name = _this.form.name ? _this.form.name : _this.md_userInfo.realName
            _this.form.idCode = _this.form.idCode ? _this.form.idCode : _this.md_userInfo.identifyCode
            _this.form.mobileNo = _this.form.mobileNo ? _this.form.mobileNo : _this.md_userInfo.mobileNum
            _this.form.marryStatus = _this.form.marryStatus + ''
            _this.form.sex = _this.form.sex || ''
            _this.form.sex += ''
          }
        } else {
          _this.$alert(res.msg, '提示')
        }
      })
    },
    submitCheck () {
      let flag = true
      const mPattern = /^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(18[0-9]|(17[0-9])))\d{8}$/
      // const ePattern = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
      const pPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!this.form.header) {
        this.$alert('请选择照片', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.birthday) {
        this.$alert('请选择出生日期', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      // } else if (!this.form.email || !this.form.email.trim() || !ePattern.test(this.form.email)) {
      //   if (!ePattern.test(this.form.email)) {
      //     this.$alert('邮箱格式不正确', '提示', {
      //       confirmButtonText: '确定',
      //       callback: () => {
      //       }
      //     })
      //   } else {
      //     this.$alert('请填写邮箱', '提示', {
      //       confirmButtonText: '确定',
      //       callback: () => {
      //       }
      //     })
      //   }
      //   flag = false
      } else if (!this.form.householdRegister || !this.form.householdRegister.trim()) {
        this.$alert('请填写户籍', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.name || !this.form.name.trim()) {
        this.$alert('请填写所属姓名', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.sex) {
        this.$alert('请选择性别', '提示')
        flag = false
      } else if (!this.form.idCode || !this.form.idCode.trim() || !pPattern.test(this.form.idCode.trim())) {
        if (!pPattern.test(this.form.idCode.trim())) {
          this.$alert('身份证号格式不正确', '提示', {
            confirmButtonText: '确定',
            callback: () => {
            }
          })
        } else {
          this.$alert('请填写身份证号', '提示', {
            confirmButtonText: '确定',
            callback: () => {
            }
          })
        }
        flag = false
      } else if (!this.form.mobileNo || !mPattern.test(this.form.mobileNo)) {
        if (!mPattern.test(this.form.mobileNo)) {
          this.$alert('手机号格式不正确', '提示', {
            confirmButtonText: '确定',
            callback: () => {
            }
          })
        } else {
          this.$alert('请填写手机号', '提示', {
            confirmButtonText: '确定',
            callback: () => {
            }
          })
        }

        flag = false
      } else if (!this.form.education) {
        this.$alert('请选择学历', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.workYear) {
        this.$alert('请选择开始工作年份', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      // } else if (!this.form.liveAddress || !this.form.liveAddress.trim()) {
      //   this.$alert('请填写居住地', '提示', {
      //     confirmButtonText: '确定',
      //     callback: () => {
      //     }
      //   })
      //   flag = false
      } else if (!this.form.homeAddress || !this.form.homeAddress.trim()) {
        this.$alert('请填写家庭住址', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.findJobStatus) {
        this.$alert('请选择求职状态', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.marryStatus) {
        this.$alert('请选择婚姻状态', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      // } else if (!this.form.politicCountenance) {
      //   this.$alert('请选择政治面貌', '提示', {
      //     confirmButtonText: '确定',
      //     callback: () => {
      //     }
      //   })
      //   flag = false
      // } else if (!this.form.introduction || !this.form.introduction.trim()) {
      //   this.$alert('请填写自我评价', '提示', {
      //     confirmButtonText: '确定',
      //     callback: () => {
      //     }
      //   })
      //   flag = false
      }

      return flag
    }
  }
}
</script>
<style lang="less" scoped>
    @import "../../assets/css/member";
</style>
